﻿@using MvcApplication1.Controllers;

@model System.Collections.Generic.List<ObjectRender>

<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a href="~/">ASP.NET Web API</a>
            </p>
        </div>
    </div>
    <script>
        function deleteFunc(id) {
            $.ajax({
                dataType: 'json',
                type: "POST",
                url: "@Url.Action("deleteCategory", "Home")",
                data: {
                    id: id
                },
                success: function (resultData) {
                    location.reload();
                },
                error: function () {
                    alert("Failed");
                }

            });
        }

        function updateFunc(id) {
            var color = $('#color_' + id).val();
            var type = $('#type_' + id).val();
            $.ajax({
                dataType: 'json',
                type: "POST",
                url: "@Url.Action("updateCategory", "Home")",
                data: {
                    id: id,
                    color: color,
                    type: type
                },
                success: function (resultData) {
                    location.reload();
                },
                error: function () {
                    alert("Failed");
                }

            });
        }
    </script>
</header>
<div id="body">
    <section class="featured">
        <table width="50%" cellpadding="0" cellspacing="0" style="margin-left: 200px;" class="sortTable">

            <thead>
                <tr>
                    <th><a href="">ID</a></th>
                    <th><a href="">Color</a></th>
                    <th><a href="">Type</a></th>
                    <th><a href="">Actions</a></th>
                </tr>
            </thead>

            <!--do not use this loop any more-->


            <tbody>
                @{
                    foreach (var temp in Model)
                    {
                        <tr>
                            <td>
                                <a href="">@temp.id</a>
                            </td>
                            <td>
                                <input id="color_@temp.id" type="text" value="@temp.color" />
                            </td>
                            <td>
                                <select id="type_@temp.id" name="type">
                                    @{ if (@temp.type == "inferior")
                                       {
                                        <option selected value="inferior">Inferior</option>
                                        <option value="normal">Normal</option>
                                        <option value="luxury">Luxury</option>
                                       }
                                       else if (@temp.type == "normal")
                                       {
                                        <option value="inferior">Inferior</option>
                                        <option selected value="normal">Normal</option>
                                        <option value="luxury">Luxury</option>
                                       }
                                       else
                                       {
                                        <option value="inferior">Inferior</option>
                                        <option value="normal">Normal</option>
                                        <option selected value="luxury">Luxury</option>
                                       }
                                    }
                                    
                                </select>
                            </td>
                            <td>
                                <a onclick="updateFunc(@temp.id);" >Update</a>
                                <a onclick="deleteFunc(@temp.id);" >Delete</a>
                            </td>
                        </tr>
                    } 
                }
                
            </tbody>

        </table>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <form action="@Url.Action("Index", "Home")" method="post" accept-charset="UTF-8">
            <label>Color </label>
            <input type="text" name="color" />
            <br>
            <label>Type </label>
            <select name="type">
                <option value="inferior">Inferior</option>
                <option selected value="normal">Normal</option>
                <option value="luxury">Luxury</option>
            </select>
            <br>
            <input type="submit" value="Insert" />
        </form>
    </section>
</div>
